M
MLOG
React Lazy Loading: Komponens kód-felosztás az optimalizált teljesítményért | MLOG | MLOG ); } export default ImageGallery;

És az Image.js komponens:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Ebben a példában minden kép egy <Suspense> komponensbe van csomagolva, így minden képhez egy betöltési üzenet jelenik meg, amíg az betöltődik. Ez megakadályozza, hogy az egész oldal blokkolva legyen, amíg a képek letöltődnek.

Haladó technikák és megfontolások

1. Hibahatárok (Error Boundaries)

A lazy loading használatakor fontos kezelni a betöltési folyamat során esetlegesen felmerülő hibákat. A hibahatárok (Error Boundaries) használhatók ezen hibák elkapására és egy tartalék UI megjelenítésére. Létrehozhat egy hibahatár komponenst így:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Ezután csomagolja be a <Suspense> komponenst az <ErrorBoundary>-vel:



  Loading...}>

Ha hiba történik a MyComponent betöltése közben, az <ErrorBoundary> elkapja azt és megjeleníti a tartalék UI-t.

2. Szerveroldali renderelés (SSR) és Lazy Loading

A lazy loading szerveroldali rendereléssel (SSR) együtt is használható az alkalmazás kezdeti betöltési idejének javítására. Azonban ez némi további konfigurációt igényel. Biztosítania kell, hogy a szerver helyesen tudja kezelni a dinamikus importokat, és hogy a lustán betöltött komponensek megfelelően hidratálódjanak a kliens oldalon.

Az olyan eszközök, mint a Next.js és a Gatsby.js, beépített támogatást nyújtanak a lazy loadinghoz és a kód-felosztáshoz SSR környezetekben, ami jelentősen megkönnyíti a folyamatot.

3. Lustán betöltött komponensek előtöltése

Bizonyos esetekben előfordulhat, hogy előre szeretne betölteni egy lustán betöltött komponenst, mielőtt arra ténylegesen szükség lenne. Ez hasznos lehet olyan komponensek esetében, amelyek valószínűleg hamarosan renderelésre kerülnek, például olyan komponensek, amelyek az oldal alján helyezkednek el, de valószínű, hogy a felhasználó odagörget. Egy komponenst előtölthet az import() függvény manuális meghívásával:


import('./MyComponent'); // Preload MyComponent

Ez elkezdi a komponens háttérben történő betöltését, így gyorsabban elérhető lesz, amikor ténylegesen renderelésre kerül.

4. Dinamikus importok Webpack "mágikus kommentekkel"

A Webpack "mágikus kommentjei" lehetővé teszik a generált kód-darabok nevének testreszabását. Ez hasznos lehet a hibakereséshez és az alkalmazás csomagszerkezetének elemzéséhez. Például:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Ez egy "my-component.js" (vagy hasonló) nevű kód-darabot hoz létre egy általános név helyett.

5. Gyakori buktatók elkerülése

Valós példák és felhasználási esetek

A lazy loading széles körben alkalmazható a React alkalmazások teljesítményének javítására. Íme néhány példa:

Példa: Nemzetközi e-kereskedelmi weboldal

Képzeljen el egy e-kereskedelmi weboldalt, amely globálisan értékesít termékeket. Különböző országoknak különböző pénznemeik, nyelveik és termékkatalógusaik lehetnek. Ahelyett, hogy minden ország adatait előre betöltenénk, a lazy loading segítségével csak a felhasználó tartózkodási helyének megfelelő adatokat tölthetjük be, amikor meglátogatja az oldalt.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funkció a felhasználó országának meghatározására

  return (
    Tartalom betöltése az Ön régiójához...}>
      
      
    
  );
}

Összegzés

A lazy loading és a komponens kód-felosztás hatékony technikák a React alkalmazások teljesítményének optimalizálására. Azzal, hogy a komponenseket csak akkor töltjük be, amikor szükség van rájuk, jelentősen csökkenthetjük a kezdeti betöltési időt, javíthatjuk a felhasználói élményt és a SEO-t. A React beépített React.lazy() és <Suspense> komponensei megkönnyítik a lazy loading megvalósítását a projektjeiben. Használja ezeket a technikákat, hogy gyorsabb, reszponzívabb és lebilincselőbb webalkalmazásokat hozzon létre egy globális közönség számára.

Ne feledje, hogy a lazy loading megvalósításakor mindig vegye figyelembe a felhasználói élményt. Biztosítson informatív tartalék UI-kat, kezelje kecsesen a lehetséges hibákat, és gondosan elemezze az alkalmazás teljesítményét, hogy biztosan elérje a kívánt eredményeket. Ne féljen kísérletezni különböző megközelítésekkel, és megtalálni az Ön specifikus igényeinek leginkább megfelelő megoldást.